<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{mydata}}
    </div>
    <script>

        // 第一步 ： 初次渲染  
        var data = {
            mydata:"数据"
        }
        var appEle = document.querySelector("#app");  // 查找需要替换的范围
        compile(appEle);
        function compile(appEle){
            var childNodes = appEle.childNodes;
            // console.log(childNodes);
            childNodes.forEach(function(node){
                // 处理的是 文本节点 
                if(node.nodeType===3){
                    // 证明节点是文本节点
                    var content = node.textContent;
                    // console.log("("+content.trim()+")");
                    content = content.trim();  // 去掉 内容前后的空格
                    // console.log(content);
                    if(content){
                        // console.log(content);
                        // {{message}}
                        var reg = /\{\{([^{}]+)\}\}/g;
                        if(reg.test(content)){
                            console.log(content);
                            // 获取分组里匹配的内容
                            var $1 = RegExp.$1;  // 获取分组里匹配的内容
                            console.log($1); // mydata
                            node.textContent = data[$1];  // data['mydata']
                        }
                    }
                }
            })
        }



        // 二次渲染 ： 把数据变成 可控的，可观察（监听）的。
        var value = data['mydata'];
        Object.defineProperty(data,"mydata",{
            configurable:true,
            enumerable:true,
            get:function(){
                return value;
            },
            set:function(newvalue){
                console.log("set设置了");
                document.querySelector("#app").innerHTML = newvalue;
                value = newvalue;
            }
        })

        console.log(data);

    </script>
</body>
</html>